<template>
  <div>
    <el-row class="header_top">
      <el-col :span="3" :offset="2" class="header_top_l">
        <el-link :underline="false" style="color: white" @click="handleIndex"
          >商城首页</el-link
        >
      </el-col>
      <el-col
        :span="3"
        :offset="15"
        class="header_top_r"
        style="height: 40px; line-height: 40px"
      >
        <el-col style="background: black; color: black">
          <el-link
            :underline="false"
            v-if="nickname == '' || nickname == null"
            style="color: white"
            @click="handleLogin"
            >请先登录</el-link
          >
          <el-dropdown
            @command="handleCommand"
            style="font-size: 5px"
            v-if="nickname !== null"
          >
            <span style="color: white">{{ nickname }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">个人信息</el-dropdown-item>
              <el-dropdown-item command="c">我的订单</el-dropdown-item>
              <el-dropdown-item command="d">我的购物车</el-dropdown-item>
              <el-dropdown-item command="b">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>
    </el-row>
    <el-row class="header_top_2" v-show="viewShow">
      <el-col :span="3" :offset="2" style="text-align: left">
        <img
          style="height: 50px; width: 100px"
          src="../assets/miju2.jpg"
          alt=""
          @click="handleIndex"
        />
      </el-col>
      <el-col :span="10">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="rgb(238, 238, 238)"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">全部商品</el-menu-item>
        </el-menu>
      </el-col>
      <!-- <el-col :span="5" :offset="2">
        <el-input placeholder="请输入内容" v-model="input" class="input">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
// import func from "../../vue-temp/vue-editor-bridge";
export default {
  name: "",
  data() {
    return {
      input: "",
      value: "",
      pages: "",
      disableShow: true,
      activeIndex: "1",
      viewShow: true,
      nickname: "",
    };
  },
  props: {
    recordNum: String,
    viewstyle: String,
  },
  components: {},
  methods: {
    // 显示全部商品
    handleCommand(command) {
      switch (command) {
        case "a":
          this.$router.push({ path: "/person" });
          break;
        case "b":
          this.$router.push({ path: "/login" });
          window.sessionStorage.removeItem("token");
          break;
        case "c":
          this.handleShopBook();
          break;
        case "d":
          this.handleShopCar();
          break;
      }
    },
    // 跳转订单确认
    handleShopCar() {
      this.$router.push({ path: "/shop_s" });
    },
    // 跳转订单列表
    handleShopBook() {
      this.$router.push({ path: "/order" });
    },
    // 发送选择数字给父组件
    handleSelect(key, keyPath) {
      this.$emit("index", key);
      console.log(key, keyPath);
    },
    // 头部分类选择
    handleChangeStyle() {
      switch (this.viewstyle) {
        case "Order":
          this.viewShow = false;
          break;
        case "person":
          this.viewShow = false;
          break;
        case "details":
          this.viewShow = false;
          break;
        case "shop_s":
          this.viewShow = false;
          break;
      }
    },
    // 获取用户信息
    async handleGetUser() {
      if (window.sessionStorage.getItem("token") == null) {
        return;
      }
      const { data: res } = await this.$axios.get("users/info", {});
      if (res.meta.status === 200) {
        this.nickname = res.data.nickname;
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
        return false;
      }
    },
    handleIndex() {
      this.$router.push("/indexContent");
      this.$router.go(0);
    },
    handleLogin() {
      this.$router.push("/login");
    },
    handleChangePath() {
      console.log(this.$route.path == "/indexContent");
      if (this.$route.path == "/indexContent" || this.$route.path == "") {
        this.activeIndex = "1";
      } else {
        this.activeIndex = "2";
      }
    },
  },
  created() {
    this.handleGetUser();

    this.handleChangeStyle();

    this.handleChangePath();
  },
};
</script>

<style scoped>
.color_f_w {
  color: white;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  min-height: 50px;
  line-height: 50px;
}
.header_top {
  min-height: 40px;
  line-height: 40px;
  margin-top: -7px;
  background: black;
}
.header_top .el-link {
  font-size: 14px;
  margin-left: 10px;
}
.header_top_2 .el-col {
  line-height: 50px;
}
</style>
